<!--
作者: nodebook@qq.com
组件名称: 折线图1 https://www.isqqw.com/viewer?id=39689
-->
<template>
    <div class="line1" ref="line1"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
defineOptions({ name: "LineChart1" });

const props = defineProps({
    data: {
        type: Object,
        default: {
            x: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            y: [
                {
                    name: '温度',
                    data: [1,2,3,4,5,6]
                },
                {
                    name: '湿度',
                    data: [5,7,2,1,8,4]
                }
            ]
        }
    }
})

const line1 = ref(null)

// 格式化数据
const formatData = (val) =>{
    let data = {
        xAxis: {
            type: 'category',
            data: val.x.data
        },
        series: []
    }
    for(let i=0; i<val.y.length; i++){
        data.series.push({
            data: val.y[i].data,
            type: 'line'
        })
    }
    return data
}

let option;
onMounted(()=>{
    let myChart = echarts.init(line1.value);
    option = {
        xAxis: {
            type: 'category',
            data: formatData(props.data).xAxis
        },
        yAxis: {
            type: 'value'
        },
        series: formatData(props.data).series
    };
    option && myChart.setOption(option);
})



</script>

<style scoped>
.line1 {
    width: 100%;
    height: 100%;
}
</style>
